<template>
  <div class="home">
    <!-- 首页图片 -->
    <var-image lazy style="animation: header-effect 2s" class="background-image" fit="cover" :src="back_img">
      <div slot="error" class="image-slot background-image-error"></div>
    </var-image>
    <!-- 首页文字 -->
    <div class="signature-wall myCenter my-animation-hideToShow">
      <!-- <h1 class="playful">
        <span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{ a }}</span>
      </h1> -->
      <h1 class="playful"><span>生活倒影</span></h1>
      <div class="printer" @click="getGuShi()">
        <usePrinter :printerInfo="printerInfo">
          <template #paper="scope">
            <!-- <div>{{ scope }}</div> -->
            <h3>
              {{ scope.content }}<span class="cursor">|</span>
            </h3>
          </template>
        </usePrinter>
      </div>
      <div id="bannerWave1"></div>
      <div id="bannerWave2"></div>
      <el-icon class="el-icon-arrow-down" @click="navigation('.page-container-wrap')">
        <ArrowDownBold />
      </el-icon>
      <!-- <var-icon class="el-icon-arrow-down" name="menu-down" @click="navigation('.page-container-wrap')" /> -->
      <!-- <i class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"></i> -->
    </div>
    <!-- 首页内容 -->
    <div class="page-container-wrap">
      <div class="page-container">
        <div class="aside-content">
          <myAside></myAside>
        </div>
        <div class="recent-posts">
          <div class="announcement background-opacity">
            <i class="fa fa-volume-up" aria-hidden="true"></i>
            <div class="notices">
              {{ webInfo.notices }}
            </div>
          </div>
          <articleList></articleList>
          <div class="pagination-wrap">
            <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
              下一页
            </div>
            <div v-else style="user-select: none">
              ~~到底啦~~
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watch } from 'vue'
import usePrinter from '@/components/printer'
import myAside from '@/components/myAside'
import articleList from '@/components/articleList'
import constant from '@/utils/constant'
import axios from "axios"
// import common from "../../utils/common"
import { useStore } from 'vuex'
export default {
  name: 'Home',
  components: { usePrinter, myAside, articleList },
  setup() {
    const store=useStore();
    const data = reactive({
      back_img: "https://s3.bmp.ovh/imgs/2023/12/21/4a501ae288c72d06.jpg",
      printerInfo: "你看对面的青山多漂亮",
      articles: [],
      pagination: {
        total: 6
      },
      webInfo: {
        notices: "网站上线啦  http:www.ordinary.fun"
      },
      scrollTop: 0,
    })
    const getGuShi = () => {
      axios.get(constant.jinrishici).then(res => {
        console.log(res.data.content)
        data.printerInfo = res.data.content;
      }).catch(err => {
        console.log(err)
      })
    }

    watch(data.scrollTop, (scrollTop, oldScrollTop) => {
      //如果滑动距离超过屏幕高度三分之一视为进入页面，背景改为白色
      let enter = scrollTop > window.innerHeight / 2;
      const top = scrollTop - oldScrollTop < 0;
      //导航栏显示与颜色
      let toolbarStatus = {
        enter: enter,
        visible: top,
      };
      store.commit("changeToolbarStatus", toolbarStatus);
    })

    const navigation = (selector) => {
      let pageId = document.querySelector(selector);
      window.scrollTo({
        top: pageId.offsetTop,
        behavior: "smooth"
      });
    }
    onMounted(() => {
      getGuShi()
    })
    return {
      ...toRefs(data),
      getGuShi,
      navigation,
    }
  },
}
</script>
<style scoped lang='scss'>
.signature-wall {
  /* 向下排列 */
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  height: 100vh;
  overflow: hidden;
}

.playful {
  color: var(--white);
  font-size: 40px;
}

.printer {
  cursor: pointer;
  color: var(--white);
  background: var(--translucent);
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

/* 光标 */
.cursor {
  margin-left: 1px;
  animation: hideToShow 0.7s infinite;
  font-weight: 200;
}

#bannerWave1 {
  height: 84px;
  background: var(--bannerWave1);
  position: absolute;
  width: 200%;
  bottom: 0;
  z-index: 10;
  animation: gradientBG 120s linear infinite;
}

#bannerWave2 {
  height: 100px;
  background: var(--bannerWave2);
  position: absolute;
  width: 400%;
  bottom: 0;
  z-index: 5;
  animation: gradientBG 120s linear infinite;
}

.el-icon-arrow-down {
  font-size: 40px;
  font-weight: bold;
  color: var(--white);
  position: absolute;
  bottom: 60px;
  animation: my-shake 1.5s ease-out infinite;
  z-index: 15;
  cursor: pointer;
}

.page-container-wrap {
  background: var(--background);
  position: relative;
}

.page-container {
  display: flex;
  justify-content: center;
  width: 90%;
  padding: 0 20px 40px 20px;
  margin: 0 auto;
  flex-direction: row;
}

.recent-posts {
  width: 60%;
}

.announcement {
  padding: 22px;
  border: 1px dashed var(--lightGray);
  color: var(--greyFont);
  border-radius: 10px;
  display: flex;
  max-width: 780px;
  margin: 80px auto 40px;
}

.announcement i {
  color: var(--themeBackground);
  font-size: 22px;
  margin: auto 0;
  animation: scale 0.8s ease-in-out infinite;
}
.notices {
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.announcement div div {
  margin-left: 20px;
  line-height: 30px;
}

.aside-content {
  width: calc(30% - 40px);
  user-select: none;
  margin-top: 80px;
  margin-right: 40px;
  max-width: 300px;
  float: right;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination {
  padding: 13px 15px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  width: 100px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}

.pagination:hover {
  border: 1px solid var(--themeBackground);
  color: var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}

@media screen and (max-width: 1100px) {
  .recent-posts {
    width: 100%;
  }

  .page-container {
    width: 100%;
  }
}

@media screen and (max-width: 1000px) {
  .page-container {
    /* 文章栏与侧标栏垂直排列 */
    flex-direction: column;
  }

  .aside-content {
    width: 100%;
    max-width: unset;
    float: unset;
    margin: 40px auto 0;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 35px;
  }
}
</style>